<?php
    session_start();

require_once 'includes/includes.php';

if(!isset($_SESSION['counter'])) {
        $_SESSION['counter'] = 1;
    }
    
    $counter =& $_SESSION['counter'];
    $counter++;
    
    $defaultCount = Picture::getCounterValue();


$get_album = isset($_GET['album']) ? utf8_urldecode($_GET['album']) : null;
$get_photoId = isset($_GET['image']) ? $_GET['image'] : null;

$albums = Picture::getAlbums();
$countPics = Picture::countPicsInAlbum($get_album);
$photo = Picture::currentPhoto($get_album, $get_photoId);
$has_prev = Picture::hasPrevious($photo);
$has_next = Picture::hasNext($photo);

if($countPics > 0) {
    
    if(!isset($_SESSION['albumName'])) {
        $_SESSION['albumName'] = '';
    }
    
    if(isset($_SESSION['albumName']) && $_SESSION['albumName'] != $get_album) {
        $_SESSION['albumName'] = $get_album;
        $_SESSION['imgCount'] = $countPics;
        $_SESSION['currImgNumber'] = 1;
        
        $imgCount = $_SESSION['imgCount'];
    }
    
    $currImgNumber =& $_SESSION['currImgNumber'];
    $currImgNumber++;
    
}

if($get_album != null) {
    $album_id = Picture::getAlbumId($get_album);
    $albumContent = Picture::getAlbumContent($album_id);
}
else {
    $albumContent = null;
}


?>
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="<?php echo ($albumContent != null) ? $albumContent : 'Crazy pictures'; ?>">
    <link type="text/css" rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="js/index_ext.js"></script>
    <title>300img <?php echo ($get_album != null) ? '| ' . $get_album : ''; ?></title>


    <div id="fb-root"></div>
    <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=239853692745753";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

</head>

<body>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-24727141-6']);
    _gaq.push(['_setDomainName', '300img.com']);
    _gaq.push(['_setAllowLinker', true]);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>


<!--     FB  -->
<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=239853692745753";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<header>
    <nav>
        <img src="img/300img-logo.png" style="margin:5px 0px 5px 5px; float:left"/>
        <ul style="width:700px;" id="albums" class="f_left">
            <?php
            
                foreach ($albums as $album) {
                    
                    if(is_dir('albums/' . $album['name'])) {
                        
                        if(isset($_GET['album']) && $_GET['album'] == $album['name']) {
                            echo '<li>';
                            echo    '<a style="text-decoration: underline;" class="folder" href="index.php?album=' . $album['name'] . '" >';
                            echo        $album['name'];
                            echo    '/<span style="font-size10px; color: #444">' . $album['images_count'] . '</span>';
                            echo    '</a>';
                            echo '</li>';
                        }
                        else {
                            echo '<li>';
                            echo    '<a class="folder" href="index.php?album=' . $album['name'] . '" >';
                            echo        $album['name'];
                            echo    '/<span style="font-size10px; color: #444">' . $album['images_count'] . '</span>';
                            echo    '</a>';
                            echo '</li>';
                        }
                        
                    }
                }
                
            ?>
        </ul>
    </nav>
    <div id="imgLoadBar" style="height: 2px; width: 0px; background: #f76060;"></div>
    <div class="pics_menu">
<!--        <ul id="" class="post" style="margin:0 auto; width:100%; display: none;" >
            <li><img src="img/cars/1.jpg" style="max-height: 26px;" /> </li>
            <li><img src="img/cars/2.jpg" style="max-height: 26px;" /> </li>
            <li><img src="img/cars/3.jpg" style="max-height: 26px;" /> </li>
            <li><img src="img/cars/4.jpg" style="max-height: 26px;" /> </li>
            <li>2</li>
            <li>3</li>
        </ul>-->
    </div>
</header>


<table style="margin:0 auto; margin-top:16px; margin-bottom:5px;">
    <colgroup width="62px;"></colgroup>
    <colgroup width="660px;"></colgroup>
    <colgroup width="62px;"></colgroup>
    <tr>
        <td><a href="<?php echo $has_prev;  ?>" id="left" class="f_right r_button"></a></td>
        <td style="vertical-align: middle; background: #fff;">

            <!--  START  -->
            <!-- Първоначална позиция на големия банер -->


            <div id="banner_s"  style="background: #fff;">
                <div id="small" style="width: 468px; height: 60px; margin: 0 auto; box-shadow:0px 0px 30px #fff;">

                    <script type="text/javascript"><!--
                    google_ad_client = "ca-pub-5472762465737265";
                    /* 468x60_new */
                    google_ad_slot = "8327790799";
                    google_ad_width = 468;
                    google_ad_height = 60;
                    //-->
                    </script>

                    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                    </script>

                </div>
            </div>


            <!--  END  -->

        </td>
        <td><a href="<?php echo $has_next; ?>" id="right" class="l_button f_left"></a></td>
    </tr>
</table>
<script>
    $(document).ready(function(){
        $("#fadee").hide(0).delay(0).fadeIn()
    });
</script>
<div style="min-height: 520px;">
<table id="fadee" style="margin: 0 auto; min-height: 300px; display: none;">
        <colgroup>
            <col style="width: 170px;" />
            <col style="width: 50px;" />
            <col style="width: 170px;" />
        </colgroup>
        <tr>
            <td>
            </td>
            <td>
                
                    <header style="height: 20px; overflow: hidden;">
                        <h2 class="f_left"><?php echo $photo['title']; ?><h2>
                            <div class="clear"></div>
                    </header>
                    <table>
                        <tr>
                            <td style="vertical-align: top">



                                <div id="blink" style="position: relative;">
                                    <img id="fade" src="<?php echo $photo['image']; ?>" alt="<?php echo $photo['alt']; ?>" title="<?php echo $photo['title']; ?>" style="max-height: 500px;" class="box"/><br/>


                                    <div">


                                        <div class="fb_button_pages">

                                            <a href="javascript:void();" id="comments" class="f_left mr_5" ><img src="img/comments.png" /></a>
                                            <script type="text/javascript">
                                                $('#comments').click(function() {
                                                    $('#comments_div').toggle("slide");
                                                });
                                            </script>


                                            <div class="fb-like" data-href="<?php echo curPageURL(); ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
                                        </div>

                                    </div>
                                </div>
                            </td>
                            <td style="vertical-align: top">

                                <div class="fb-comments" id="comments_div" style="display: none;" data-href="<?php echo $photo['fb']; ?>" data-width="280" data-num-posts="1"></div>

                            </td>
                        </tr>
                    </table>

                  <div id="fb-root"></div>
            </td>
            <td style="padding-left: 10px; vertical-align: top;">

            </td>
        </tr>
    </table>
</div>
<!--  START  -->
<!-- Първоначална позиция на малкия банер -->
<table style="margin:0 auto;">
    <tr>
        <td style=" max-height:500px;">
            <div style="position: static; bottom: 0px; left: 50%; right: 50%;"
            <div id="banner_l">
                <div id="large" style="width:728px; height:90px; margin:0 auto; box-shadow:0px 0px 30px #bbb;">
                    <script type="text/javascript"><!--
                    google_ad_client = "ca-pub-5472762465737265";
                    /* 728x90_new */
                    google_ad_slot = "6851057591";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    //-->
                    </script>
                    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
                </div>
            </div>
            </div>
        </td>
    </tr>
    <tr>
        <td style="text-align: center;">
            <div style="color: #aaa; width: 708px; background: #fff; padding: 10px; box-shadow:0px 0px 30px #bbb; text-align: left; text-align: justify;line-height: 16px;">
                <?php echo ($albumContent != null) ? $albumContent : ''; ?>
            </div>
        </td>
    </tr>
</table>
<!--  END  -->

<!-- START ALBUM CONTENT -->

<!-- FINISH ALBUM CONTENT -->

<footer>
    <p></p>
</footer>
<div style="width:1000px; height:0px; margin:0 auto;"></div>
<script type="text/javascript">


    var counter = <?php echo json_encode($counter); ?>;
    var defaultCounter = <?php echo json_encode($defaultCount); ?>;
    
    if (counter % defaultCounter == 0) {
        var small = $('#banner_s').html();
        var large = $('#banner_l').html();
        $('#banner_s').html(large);
        $('#banner_l').html(small);
    }

    var children = $(".fb_button_pages").children('div');
    var size = children.size();
    $(".fb_button_pages").children('div').hide();
    var rand_num = Math.floor(Math.random() * size) + 1;
    children.eq(rand_num - 1).show();

    
</script>

<script type="text/javascript">


// Image number loading bar

var imgCount = parseInt(<?php echo json_encode($countPics); ?>);
var album = <?php echo json_encode($get_album); ?>;

if(imgCount > 1) {
    
    var windowWidth = parseInt($(window).width());
    var pixelOffset = (windowWidth/imgCount).toFixed(0);
    var imgPosition = <?php echo json_encode($photo['position']); ?>;


    $('#imgLoadBar').width(pixelOffset * imgPosition);
}

</script>




</body>

</html>